<template>
  <div>
    <form @submit.prevent="login">
      <label for="usr">用户名：</label>
      <input type="text" v-model="username" /><br />
      <label for="psd">密码：</label>
      <input type="password" v-model="password" /><br />
      <input type="submit" value="登陆" />
    </form>
    <el-button type="primary" @click="dialogVisible = true"
      >点击注册新用户</el-button
    >
    <el-dialog
      title="新用户注册"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form>
        <el-form-item label="用户名" for="usr">
          <el-input type="text" v-model="username"></el-input>
        </el-form-item>
        <el-form-item label="密码" for="psd">
          <el-input type="password" v-model="password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input type="submit" value="登陆" />
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    login() {
      if (this.username == "admin" && this.password == "123456") {
        // vue中的跳转功能
        this.$router.push("/");
        // 本地存储
        // local本地  // Storage存储
        // setItem()设置本地存储的内容
        localStorage.setItem("usr", this.username);
      } else {
        confirm("密码错误");
      }
    },
    handleClose() {
      this.dialogVisible = false;
    },
  },
};
</script>